<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div> 
    <div class="img">
    </div>
    <img src="@/assets/logo1.jpg" class="logo1" />
    <div class="header">
    <div class="header-left">
      <h3>一家小面</h3>
      <p>商家配送 / 分钟送达 / 配送费￥5</p>
      <p>公告:不做最好，只做更好</p>
    </div>
    <van-icon name="arrow" class="header-right" />
    </div>
    <div class="you">
    <p class="you-left">
    <van-tag type="danger" class="biaoqian">减</van-tag>
    满30减5，满60-8(APP专享)
    </p>
    <p class="you-right">
      一个活动>
    </p>
    </div>
    </div>
   
  </div>
</template>
<script>
import { Toast, NavBar } from "vant";
import { Icon } from 'vant';
import { Tag } from 'vant';

export default {
  name: "ShopHead",
  methods: {
    onClickLeft() {
      Toast("返回");
  },
  },

  components: { [Toast.name]: Toast, 
  [NavBar.name]: NavBar,
  [Icon.name]: Icon ,
  [Tag.name]:Tag,
  },
};
</script>
<style lang="less" scoped>
/deep/.van-icon::before {
  color: #fff;
  font-size: 23px;

}
/deep/div .van-nav-bar__content {
  position: fixed;
  top: 0;
  z-index: 1;
}
/deep/.img {
  width: 100%;
  height: 120px;
  position: relative;
  left: 0;
  top: 0;
   /* ~ 为 Less 的转义字符 */
  background-image: url(~@/assets/logo1.jpg);
  background-position: center;
  background-size: cover;
  filter: blur(5px);
  z-index: -1;
}
/deep/.logo1 {
  width: 68px;
  height: 68px;
  border-radius: 5px;
  margin: 10px 5px 0px 12px;
  filter: blur(0);
  position: absolute;
  left: 0;
  top: 0;
}
/* deep */.header{
 color: #fff;
 .header-left{
   position: absolute;
   top:-12px;
   left: 90px;
}
  p{
    font-size:12px;
    line-height: 10px;
  }
  .header-right{
   position: absolute;
   top:30px;
   left: 340px;
   font-size: 40px;
 }
}


.you {
  width: 95%;
  font-size:12px ;
  position: absolute;
  top: 83px;
  left: 10px;
   color: #fff;
  .you-right{
    position: absolute;
    top:0;
   left: 300px;
    
  }
}
</style>